import { Component, OnInit, ViewChild } from "@angular/core";
import { Pedge } from "src/app/@types/pedge";
import { ProcessService } from "src/app/server/process.service";

@Component({
    selector: "task-graph",
    template: `
        <p>流程名称：{{ data.name }}</p>
        <p>流程ID：{{ data.id }}</p>
        <br />
        <hr />
        <br />
        <div
            class="canvas-wrapper"
            style="transition: transform 0.1s ease;transform-origin: left top;"
            [ngStyle]="{ transform: 'scale(' + scale / 100 + ')' }"
        >
            <process-canvas
                [edges]="edges"
                [renderPnodes]="nodes"
            ></process-canvas>
        </div>
        <div class="scale-control">
            <label class="ib"> 缩放 </label>
            <nz-slider
                class="ib"
                style="width:100px"
                [(ngModel)]="scale"
            ></nz-slider>
        </div>
    `,
    styles: [
        `
            .canvas-wrapper {
                width: 1200px;
                height: 1200px;
                position: relative;
            }
            .scale-control {
                position: fixed;
                right: 60px;
                bottom: 30px;
                border: 1px solid gainsboro;
                border-radius: 5px;
                padding: 0 16px;
                box-shadow: 1px 1px 4px 1px #b7b4b4;
            }
            .ib {
                display: inline-block;
                vertical-align: middle;
            }
        `,
    ],
})
export class GraphComponent implements OnInit {
    @ViewChild("canvas", { static: false }) canvas;
    /** 数据源 */
    data = {
        name: "测试流程",
        id: "MXKSFLASDASD-09843",
        // 点集
        nodes: [
            {
                id: "100",
                name: "A",
                pid: 0,
                x: 0,
                y: 0,
                type: 2,
                config: {
                    mode: 0,
                },
            },
            {
                id: "101",
                pid: "100",
                x: 1,
                y: 0,
                type: 0,
                config: {
                    mode: 0,
                    name: "测试一下短信",
                    platform: "0",
                    content:
                        "立于叶落风舞之中，叶脉清晰风妩媚，叶随风转沙沙响，绕树三匝还恋树，迟迟不肯安逸躺，原是落叶也恋秋风，原是落叶也尽享秋意，舞出一点点迷离舞尽柔美秋韵。此间谁敢与落叶争秋，此间谁敢与落叶媲美，自旋一圈伊人也沉醉，自舞一段飞蝶也羞怯，自吟一句任是旷世诗人也让三分，自描一笔即使绝代画师也惊叹于如此笔触。缕缕柔风，似是为落叶伴奏，倾国倾城此刻也不能描尽如此惊艳的一幕。雅俗，飘逸，清新，恬淡……便是我这凡夫俗子一见也倾心，几点淡墨，也想为他倾尽；几点情愫，也想为他燃尽；几点温柔，也想为他絮诉",
                },
            },
            {
                id: "122",
                name: "C",
                pid: "101",
                x: 2,
                y: 0,
                type: 3,
            },
        ],
    };
    /** 边 */
    edges;
    /** 节点 */
    nodes;
    /** 画布缩放系数 */
    scale = 100;
    constructor(private pSrc: ProcessService) {}

    ngOnInit(): void {
        const { nodes } = this.data;
        this.pSrc.edgesSubject.subscribe((it) => (this.edges = it));

        this.pSrc.initNodes(nodes);
        this.nodes = this.pSrc.renderPnodes;
    }
}
